<template>
	<!-- 个人资料 -->
    <div class="cashierdetails">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "员工管理", "url": "/cashier-list"},{"name": "员工详情", "url": "/cashierdetails"}]'></tz-breadcrumb>
      <!-- 数据表单 -->
<div style="margin: 20px;"></div>
<el-card class="box-card">
  <div class="text item">
      <el-tabs value="information" v-loading="loading">
    <el-tab-pane label="个人信息" name="information">
      <!-- 个人信息 -->
      <el-form  class="" label-width="80px">
        <el-form-item label="帐号">
          <el-input class="form-input" :value="tableData.mobile" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="归属">
          <el-input  class="form-input" :value="tableData.store_name" disabled=""></el-input>
        </el-form-item>
        
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="收银通道" name="payways">
      <!-- 收银通道 -->
<!-- <el-table  style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column> -->
    <!-- <el-table-column label="通道店铺id" prop="id">
    </el-table-column>
    <el-table-column label="通道创建时间"  prop="created_at">
    </el-table-column>
    <el-table-column label="通道更新时间" prop="updated_at">
    </el-table-column>
    <el-table-column>
      <template slot-scope="scope">
          <el-radio  v-model="radioWay" :label="scope.row.ways_id"  @click.native.prevent="selectWayWeixin(scope.row.ways_id)">选用</el-radio>
      </template>
    </el-table-column> -->
  <!-- </el-table> -->
  <el-row class="weixinborder">
    <div  class="weixinHeader">
      <span>微信收银通道</span>
    </div>
    <el-table
      v-loading="loadingWay"
      :data="weixinList" v-if="weixinList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="ways_id"
        label="通道店铺ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="通道创建时间">
      </el-table-column>
      <el-table-column
        prop="updated_at"
        label="通道更新时间">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
            <el-radio  v-model="radioWeixin" :label="scope.row.ways_id"  @click.native.prevent="selectWayWeixin(scope.row.ways_id)">选用</el-radio>
        </template>
      </el-table-column>
      </el-table>
    
      <el-form  class="mt20" label-width="200px">
          <el-form-item>
          <el-button type="primary" @click="modifyWayWeixin()" v-loading.fullscreen.lock="fullscreenLoadingWeixin">保存修改</el-button>
        </el-form-item>
      </el-form>
    
    </el-row>
    <el-row class="weixinborder apliayborder mt20">
    <div  class="weixinHeader buleBg">
      <span>支付宝收银通道</span>
    </div>
    <el-table
      v-loading="loadingWay"
      :data="alipayList" v-if="alipayList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="ways_id"
        label="通道店铺ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="通道创建时间">
      </el-table-column>
      <el-table-column
        prop="updated_at"
        label="通道更新时间">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
            <el-radio  v-model="radioAlipay" :label="scope.row.ways_id"  @click.native.prevent="selectWayAlipay(scope.row.ways_id)">选用</el-radio>
        </template>
      </el-table-column>
      </el-table>
    
      <el-form  class="mt20" label-width="200px">
          <el-form-item>
          <el-button type="primary" @click="modifyWayAlipay()" v-loading.fullscreen.lock="fullscreenLoadingAlipay">保存修改</el-button>
        </el-form-item>
      </el-form>
    
    </el-row>
    <el-row class="weixinborder bankborder mt20">
    <div  class="weixinHeader pinkBg">
      <span>银行卡收银通道</span>
    </div>
    <el-table
      v-loading="loadingWay"
      :data="bankList" v-if="bankList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="ways_id"
        label="通道店铺ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="通道创建时间">
      </el-table-column>
      <el-table-column
        prop="updated_at"
        label="通道更新时间">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
            <el-radio  v-model="radioBank" :label="scope.row.ways_id"  @click.native.prevent="selectWayBank(scope.row.ways_id)">选用</el-radio>
        </template>
      </el-table-column>
      </el-table>
    
      <el-form  class="mt20" label-width="200px">
          <el-form-item>
          <el-button type="primary" @click="modifyWayBank()" v-loading.fullscreen.lock="fullscreenLoadingBank">保存修改</el-button>
        </el-form-item>
      </el-form>
    
    </el-row>
    </el-tab-pane>
    <el-tab-pane label="修改手机号码" name="editphone">
       <!-- 修改手机号码 -->
      <el-form  class="" label-width="200px">
        <el-form-item label="旧号码">
          <el-input class="form-input"  v-model='phone' readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="图形验证码">
          <el-input  class="form-input"  v-model="modifyPasData.imgcode" placeholder="请输入图形验证码">
             <template slot="append" >
                      <span v-on:click="changeimg" :class="showImgText?'show-img':'hide'">点击获取图片</span>
                      <img v-bind:src="imgUrl" class="img-path" :class="showImgText?'hide':'show-img'" v-on:click="changeimg"/>
              </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" class="form-item">
              <el-input placeholder="请输入验证码" v-model="modifyPasData.code"  clearable>
                    <template slot="append">
                      <input type="button" class=" btn btn-no-bg"  v-bind:disabled="SMSSendClick" v-model="txtusersend" />
                      <div class="img-path send-btn" v-on:click="getCode"></div>
                    </template>
              </el-input>
        </el-form-item>
        <el-form-item label="新号码">
          <el-input  class="form-input" v-model='newPhone' placeholder="请输入真实手机号码"></el-input>
        </el-form-item>
          <el-form-item>
          <el-button type="primary"  @click="modifyMobile" v-loading.fullscreen.lock="fullscreenLoading1">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="修改密码" name="editpass">
      <!-- 修改密码 -->
      <el-form  class="" label-width="200px">
         <el-form-item label="手机号">
          <el-input  class="form-input"  v-model="modifyPasData.tel" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="图形验证码">
          <el-input  class="form-input"  v-model="modifyPasData.imgcode" placeholder="请输入图形验证码">
             <template slot="append" >
                      <span v-on:click="changeimg" :class="showImgText?'show-img':'hide'">点击获取图片</span>
                      <img v-bind:src="imgUrl" class="img-path" :class="showImgText?'hide':'show-img'" v-on:click="changeimg"/>
              </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" class="form-item">
              <el-input placeholder="请输入验证码" v-model="modifyPasData.code"  clearable>
                    <template slot="append">
                      <input type="button" class=" btn btn-no-bg"  v-bind:disabled="SMSSendClick" v-model="txtusersend" />
                      <div class="img-path send-btn" v-on:click="getCode"></div>
                    </template>
              </el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input  class="form-input" type="password" v-model="modifyPasData.newPassword" placeholder="密码至少8位，字母、数字、特殊符号（必须包含其中两个）"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input  class="form-input" type="password" v-model="modifyPasData.refPassword" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <!-- <el-row>
          <el-col>
          <p class="tip">注：超级管理员无需手机验证码</p>
          </el-col>
        </el-row> -->
          <el-form-item>
          <el-button type="primary" @click="modifyPassword" v-loading.fullscreen.lock="fullscreenLoading2">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
        <el-tab-pane label="聚合收款码" name="mergepayqr">
      <!-- 聚合收款码 -->
      <el-tag type="warning">提示：可以使用二维码内容，去创建有商户特色的二维码</el-tag>
            <br><br>
      <el-form  class="" label-width="150px">
        
        <el-form-item label="收款二维码">
         <div v-if="tableData.mergepayqr">
              <tz-qrcode :data='tableData.mergepayqr' class="qrcodeDemo" :width='200'></tz-qrcode>
        </div>
        <div v-else>
        <img src="./../../public/img/default_upic.png"  width="300px">
        </div>
        </el-form-item>
        <el-form-item label="二维码内容">
         <el-tag>{{tableData.mergepayqr}}</el-tag>
        </el-form-item>
          <el-form-item v-if="tableData.mergepayqr"> 
          <el-button type="success" @click="savePic()">下载收款二维码</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
  </div>
</el-card>

    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    var that = this;
    // 获取详情
    that.getcashierdetails();
    // 获取收银通道
    that.getWayRequest();
    // 用户信息基本资料查询
    http.get(api.userInfo, {
      token: that.token
    }, (res) => {
      console.log(res);
      console.log(999);
      if (res.code === '10001' && res.status === 'SUCCESS') {
        that.tel = res.data[0].result.phone;
        return false;
      };
      that.$message.error(res.msg);
    }, () => {
      that.$message.error('网络错误，请稍候再试');
    });
  },
  data: function () {
    return {
      token: localStorage.getItem('token'),
      // 修改手机确定按钮防爆点击事件
      makesure1: true,
      // 修改密码确定按钮防爆点击事件
      makesure2: true,
      // 发送验证码是否可以点击fales可以点击
      SMSSendClick: false,
      // 发送验证码的文字显示
      txtusersend: '发送验证码',
      // 显示图片的地址
      imgUrl: '',
      // 修改手机号旧手机号
      phone: '',
      // 修改手机号新手机号
      newPhone: '',
      // 登录人的手机号
      tel: '',
      // 收银员id
      cashier_id: this.$route.query.cashier_id ? this.$route.query.cashier_id : '',
      // 店铺code
      store_code: this.$route.query.store_code ? this.$route.query.store_code : '',
      // 收银通道列表数据
      tableData: [],
      // 是否显示页面
      loading: false,
      // 修改密码的参数
      modifyPasData: {
        tel: '',
        imgcode: '',
        code: '',
        newPassword: '',
        refPassword: '',
        // 对应的图片验证码获取的key值
        verificationKey: ''
      },
      // 点击获取图片的字的显示
      showImgText: true,
      // 修改手机号按钮点击加载
      fullscreenLoading1: false,
      // 修改密码按钮点击加载
      fullscreenLoading2: false,
      // 收银通道列表
      wayList: [],
      // 收银通道列表加载
      loadingWay: true,
      // radio选中的值
      radioAlipay: '',
      radioBank: '',
      radioWeixin: '',
      // 收银通道列表提交效果
      fullscreenLoadingWay: false,
      // 银行通道列表
      bankList: [],
      // 支付通道列表
      alipayList: [],
      // 微信通道列表
      weixinList: [],
      // 防爆点击微信
      makesureWeixin: true,
      // 防爆点击支付宝
      makesureAlipay: true,
      // 防爆点击银行
      makesureBank: true,
      // 点击微信通道按钮效果
      fullscreenLoadingWeixin: false,
      // 点击支付宝通道按钮效果
      fullscreenLoadingAlipay: false,
      // 点击银行卡通道按钮效果
      fullscreenLoadingBank: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 下载二维码
    savePic () {
      var canvasData = document.getElementsByClassName('qrcodeDemo')[0].children[0];
      var a = document.createElement('a');
      a.href = canvasData.toDataURL();
      a.download = 'drcQrcode';
      a.click();
    },
    // 修改微信通道
    modifyWayWeixin () {
      var that = this;
      if (!that.makesureWeixin) {
        return false;
      }
      // if (that.weixinList === '') {
      //   return false;
      // }
      if (that.radioWeixin === '') {
        that.$message.error('微信收银通道实列选择不能为空');
        return false;
      }
      that.fullscreenLoadingWeixin = !that.fullscreenLoadingWeixin;
      // 提交选中实列
      http.post(api.paywayTypeMain, {
        token: that.token,
        store_code: that.store_code,
        saveType: 'waycashier',
        type: 'g_weixin',
        ways_id: that.radioWeixin,
        cashier_id: that.cashier_id
      }, (res) => {
        console.log(res);
        that.fullscreenLoadingWeixin = !that.fullscreenLoadingWeixin;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success('微信通道修改成功');
          setTimeout(function () {
            that.makesureWeixin = true;
          }, 3000);
          return false;
        } else {
          that.$message.error(res.msg);
          that.makesureWeixin = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesureWeixin = true;
        that.fullscreenLoadingWeixin = !that.fullscreenLoadingWeixin;
      });
    },
    // 修改支付宝通道
    modifyWayAlipay () {
      var that = this;
      console.log(2333);
      if (!that.makesureAlipay) {
        return false;
      }
      if (that.radioAlipay === '') {
        that.$message.error('支付宝收银通道实列选择不能为空');
        return false;
      }
      that.fullscreenLoadingAlipay = !that.fullscreenLoadingAlipay;
      // 提交选中实列
      http.post(api.paywayTypeMain, {
        token: that.token,
        store_code: that.store_code,
        saveType: 'waycashier',
        type: 'g_alipay',
        ways_id: that.radioAlipay,
        cashier_id: that.cashier_id
      }, (res) => {
        console.log(res);
        that.fullscreenLoadingAlipay = !that.fullscreenLoadingAlipay;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success('支付宝通道修改成功');
          setTimeout(function () {
            that.makesureAlipay = true;
          }, 3000);
          return false;
        } else {
          that.$message.error(res.msg);
          that.makesureAlipay = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesureAlipay = true;
        that.fullscreenLoadingAlipay = !that.fullscreenLoadingAlipay;
      });
    },
    // 修改银行卡通道
    modifyWayBank () {
      var that = this;
      if (!that.makesureBank) {
        return false;
      }
      if (that.radioBank === '') {
        that.$message.error('银行收银通道实列选择不能为空');
        return false;
      }
      that.fullscreenLoadingBank = !that.fullscreenLoadingBank;
      // 提交选中实列
      http.post(api.paywayTypeMain, {
        token: that.token,
        store_code: that.store_code,
        saveType: 'waycashier',
        type: 'g_sfbank',
        ways_id: that.radioBank,
        cashier_id: that.cashier_id
      }, (res) => {
        console.log(res);
        that.fullscreenLoadingBank = !that.fullscreenLoadingBank;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success('银行卡通道修改成功');
          setTimeout(function () {
            that.makesureBank = true;
          }, 3000);
          return false;
        } else {
          that.$message.error(res.msg);
          that.makesureBank = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesureBank = true;
        that.fullscreenLoadingBank = !that.fullscreenLoadingBank;
      });
    },
    // 查询收银通道
    getWayRequest () {
      var that = this;
      that.loadingWay = true;
      http.post(api.cashierWayList, {
        token: that.token,
        store_code: that.store_code,
        cashier_id: that.cashier_id
      }, response => {
        console.log(response);
        that.loadingWay = false;
        console.log(88888);
        if (response.code === '10001' && response.status === 'SUCCESS') {
          // 获取微信通道列表
          // 把对象转换为数组
          for (let k in response.data[0].result.weixin) {
            that.weixinList.push(response.data[0].result.weixin[k]);
          }
          // that.weixinList = response.data[0].result.weixin;
          // 获取微信默认选中的值payways_
          for (let k in that.weixinList) {
            if (that.weixinList[k].payways_rules.is_default === 1) {
              that.radioWeixin = that.weixinList[k].ways_id;
            }
          }
          // 获取支付宝列表
          // 把对象转换为数组
          for (let k in response.data[0].result.alipay) {
            that.alipayList.push(response.data[0].result.alipay[k]);
          }
          // that.alipayList = response.data[0].result.alipay;
          // 获取支付宝默认选中的值payways_
          for (let k in that.alipayList) {
            if (that.alipayList[k].payways_rules.is_default === 1) {
              that.radioAlipay = that.alipayList[k].ways_id;
            }
          }
          // 获取银行列表
          // 把对象转换为数组
          for (let k in response.data[0].result.sfbank) {
            that.bankList.push(response.data[0].result.sfbank[k]);
          }
          // that.bankList = response.data[0].result.sfbank;
          // 获取银行默认选中的值
          for (let k in that.bankList) {
            if (that.bankList[k].payways_rules.is_default === 1) {
              that.radioBank = that.bankList[k].ways_id;
            }
          }
        } else {
          console.log(response.msg);
        }
      }, err => {
        console.log(err);
        console.log(22);
        // that.$message.error(err.msg);
        that.lloadingWay = false;
      });
    },
    // radio单选
    selectWayAlipay (wayId) {
      wayId === this.radioAlipay ? this.radioAlipay = '' : this.radioAlipay = wayId;
      // console.log(this.radio11);
    },
    selectWayWeixin (wayId) {
      wayId === this.radioWeixin ? this.radioWeixin = '' : this.radioWeixin = wayId;
      // console.log(this.radio11);
    },
    selectWayBank (wayId) {
      wayId === this.radioBank ? this.radioBank = '' : this.radioBank = wayId;
      // console.log(this.radio11);
    },
    // 商户设置
    getcashierdetails (id) {
      let that = this;
      that.loading = true;
      http.get(api.getcashierinfo, {
        token: localStorage.getItem('token'),
        cashier_id: that.cashier_id,
        store_code: that.store_code
      }, response => {
        console.log(response);
        console.log(1010);
        if (response.code === '10001' && response.status === 'SUCCESS') {
          that.tableData = response.data[0];
          that.loading = false;
          that.phone = response.data[0].mobile;
          that.modifyPasData.tel = response.data[0].mobile;
        } else {
          that.$message.error(response.msg);
          that.loading = false;
        }
      }, err => {
        console.log(err);
        that.$message.error(err.msg);
        that.loading = false;
      });
    },
    // 获取图形验证码
    changeimg () {
      console.log(1);
      let that = this;
      http.get(api.captcha, {}, (res) => {
        console.log(res);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          // 点击发送图片不显示
          that.showImgText = false;
          // 获取对应的图片src路径
          that.imgUrl = res.data[0].captcha_image_content;
          // 获取对应的验证码key值
          that.modifyPasData.verificationKey = res.data[0].captcha_key;
          return false;
        };
        that.$message.error(res.msg);
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
      return true;
    },
     // 发送短信验证码
    getCode () {
      let that = this;
      // // 手机号码格式规范
      // var mobilephoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      // if (!mobilephoneReg.test(that.modifyPasData.tel)) {
      //   alert('手机号格式不正确');
      //   return false;
      // }
      if (that.SMSSendClick === true) {
        return false;
      }
      if (that.modifyPasData.imgcode === '') {
        that.$message.error('图形验证码不能为空');
        return false;
      }
      // 初始化60s
      var second = 60;

      http.get(api.sendsms, {
        mobile: that.tel,
        verification_code: that.modifyPasData.imgcode,
        verification_key: that.modifyPasData.verificationKey
      }, (res) => {
        console.log(res);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          // 发送验证码不能点击状态, 倒计时60s, 否则可以点击, 恢复为发送验证码，清除定时器
          that.SMSSendClick = true;
          that.$message.success('短信发送成功，请注意查收');
          var time = setInterval(function () {
            if (second > 0) {
              that.txtusersend = '剩余' + second + '秒';
              second--;
              console.log(that.txtusersend);
            } else {
              that.SMSSendClick = false;
              that.txtusersend = '发送验证码';
              // 清除定时器
              clearInterval(time);
            }
          }, 1000);
          return false;
        };
        that.$message.error(res.msg);
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
      return true;
    },
    // 修改密码
    modifyPassword () {
      var that = this;
      if (!that.makesure2) {
        return false;
      }
      // 验证密码至少8位，字母、数字、特殊符号（必须包含其中两个）
      var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[\w~!@#$%^&*()_+`\-={}:";'<>?,./]{8,}$/;
      if (that.modifyPasData.newPassword === '') {
        that.$message.error('新密码不能为空');
        return false;
      } else if (!reg.test(that.modifyPasData.newPassword)) {
        that.$message.error('密码至少8位，字母、数字、特殊符号（必须包含其中两个）');
        return false;
      } else if (that.modifyPasData.refPassword === '') {
        that.$message.error('确认密码不能为空');
        return false;
      }
      that.makesure2 = false;
      that.fullscreenLoading2 = !that.fullscreenLoading2;
      http.post(api.updatePwd, {
        token: that.token,
        mobile: that.modifyPasData.tel,
        mobile_check_code: that.modifyPasData.code,
        password: that.modifyPasData.newPassword,
        password_confirmation: that.modifyPasData.refPassword
      }, (res) => {
        that.fullscreenLoading2 = !that.fullscreenLoading2;
        console.log(res);
        console.log(999);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success(res.msg);
          // 清空
          if (that.modifyPasData.newPassword !== '') {
            that.modifyPasData.newPassword = '';
          }
          if (that.modifyPasData.refPassword !== '') {
            that.modifyPasData.refPassword = '';
          }
          if (that.modifyPasData.code !== '') {
            that.modifyPasData.code = '';
          }
          if (that.modifyPasData.imgcode !== '') {
            that.modifyPasData.imgcode = '';
          }
          setTimeout(function () {
            that.makesure2 = true;
          }, 3000);
        } else {
          that.$message.error(res.msg);
          that.makesure2 = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesure2 = true;
        that.fullscreenLoading2 = !that.fullscreenLoading2;
      });
    },
    // 修改手机号
    modifyMobile () {
      var that = this;
      if (!that.makesure1) {
        return false;
      }
      // var mobilephoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      var mobilephoneReg = /^1[34578]\d{9}$/;
      if (that.newPhone === '') {
        that.$message.error('新手机号不能为空');
        return false;
      } else if (!mobilephoneReg.test(that.newPhone)) {
        that.$message.error('手机号格式不正确');
        return false;
      } else if (that.phone === that.newPhone) {
        that.$message.error('新手机号和旧手机号一致');
        return false;
      }
      that.makesure1 = false;
      that.fullscreenLoading1 = !that.fullscreenLoading1;
      http.post(api.updateMobile, {
        token: that.token,
        mobile: that.phone,
        mobile_check_code: that.modifyPasData.code,
        new_mobile: that.newPhone,
        store_code: that.$route.query.store_code,
        cashier_id: that.$route.query.cashier_id
      }, (res) => {
        console.log(res);
        that.fullscreenLoading1 = !that.fullscreenLoading1;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success('修改手机号成功');
          // 清空
          if (that.modifyPasData.code !== '') {
            that.modifyPasData.code = '';
          }
          if (that.modifyPasData.imgcode !== '') {
            that.modifyPasData.imgcode = '';
          }
          if (that.newPhone !== '') {
            that.newPhone = '';
          }
          // 数据再次请求更新
          that.getcashierdetails();
          // 防爆点击3秒之后才可以点击
          setTimeout(function () {
            that.makesure1 = true;
          }, 3000);
        } else {
          that.$message.error(res.msg);
          that.makesure1 = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesure1 = true;
        that.fullscreenLoading1 = !that.fullscreenLoading1;
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.mt20
  margin-top: 20px
.form {
  padding: 2rem;
  padding-right: 200px;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;

  .form-item {
    display: inline-block;
    margin-right: 35px;

    label {
      font-size: 14px;
      color: #333;
      width: 200px;
      display: inline-block;
    }

    .form-input, .form-select {
      width: 200px;
    }
  }

  .line {
    height: 15px;
  }
}

.server-item {
  width: 20px;
  height: 20px;
  margin: 5px;
}
.img-path
  width: 124px
  height: 38px
  position: absolute
  top: 0
  left: 0
  cursor: pointer
.show-img
  opacity: 1
.hide
  opacity: 0
.btn-no-bg
  background: none
.tip
  color:#f00
  margin-bottom:20px
.weixinborder
  border: 1px solid #D6E9C6
  border-radius: 5px
  .weixinHeader
    background-color: #DFF0D8
    color: #3C763D
    line-height: 40px
    font-size: 14px
    padding: 0 10px
    box-sizing: border-box
    border-bottom: 1px solid #D6E9C6
.apliayborder
  border: 1px solid #BCE8F1
  .buleBg
    background-color: #D9EDF7
    border-bottom: 1px solid #BCE8F1
    color:#3184bb
.bankborder
  border: 1px solid #EBCCD1
  .pinkBg
    background-color: #EBCCD1
    border-bottom: 1px solid #BCE8F1
    color:#A94465
  
</style>
